<template>
  <div class="recharge-root">
    <van-sticky>
      <van-nav-bar title="充币" left-arrow @click-left="$router.goBack()" />
    </van-sticky>

    <div class="input-box" @click="show = true">
      <div class="select">{{ value }}</div>
    </div>

    <div class="input-box">
      <div class="title">链类型</div>
      <div class="label-box">
        <div
          class="label"
          v-for="(item, index) in listData"
          :key="index"
          :class="current == index ? 'change' : ''"
          @click="current = index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="img-box">
      <van-image
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />

      <div class="title">充币地址</div>

      <div class="code">jhdaASDgjhuisaASGHsadfsdfgBVCIrhghjgfAREDjk</div>

      <div class="copy flex-center">
        <van-icon name="description" size=".3rem" />
        <div>复制地址</div>
      </div>
    </div>

    <div class="tips">
      请勿向上述地址充值任何非USDT-TRC20资产，否则资产将不可退回
    </div>

    <!-- 弹框 -->
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          name: "ERC20",
        },
        {
          name: "TRC20",
        },
      ],
      current: 0,
      value: "USDT",
      columns: ["USDT"],
      show: false,
    };
  },
  methods: {
    onConfirm(value, index) {
      console.log(value);
    },

    onCancel() {
      this.show = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.recharge-root {
  font-size: 0.26rem;
  color: #141414;
  .input-box {
    padding: 0 0.3rem;
    margin-bottom: 0.6rem;
    &:nth-child(2) {
      padding-top: 0.3rem;
      margin-bottom: 0.45rem;
      .title {
        margin-bottom: 0.3rem !important;
      }
    }

    &:nth-last-child(2) {
      margin-bottom: 0.3rem;
    }
    .title {
      text-align: left;
      margin-bottom: 0.2rem;
      color: #2d7afe;
    }

    .label-box {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      flex-wrap: wrap;

      .label {
        border: 0.02rem solid #eee;
        background-color: #eee;
        padding: 0.12rem 0.33rem;
        margin-right: 0.3rem;
        font-size: 0.2rem;
        margin-bottom: 0.2rem;
      }

      .change {
        background-color: #fff;
        border: 0.02rem solid #2d7afe;
        color: #2d7afe;
      }
    }

    img {
      width: 0.2rem;
      height: 0.2rem;
    }

    .text {
      font-size: 0.2rem;
      color: #2d7afe;
      min-width: 0.6rem;
    }
  }

  .select {
    width: 100%;
    text-align: left;
    padding-left: 0.3rem;
    color: #666;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: #f5f5f5;
  }

  .img-box {
    padding: 0.8rem;
    margin: 0 0.3rem;
    background-color: #f5f5f5;

    .title {
      margin-top: 0.2rem;
      color: #666;
    }

    .code {
      margin: 0.2rem auto;
      text-align: center;
      max-width: 5rem;
      text-justify: newspaper;
      word-break: break-all;
    }
  }

  .tips {
    padding: 0.3rem;
    text-align: left;
    line-height: 1.5;
    font-size: 0.2rem;
    color: #666;
  }
}
</style>
